<!-- src/views/ViewFeedbackHistory.vue -->
<template>
  <div class="supervisor-container">
	  <header class="title-section">
	      <img src="@/assets/jhk-1719213427217.jpg" alt="背景图片" class="image"/>
	      <h1>东软环保公众监督平台</h1>
	      <h2>———公众监督员端———</h2>
	  </header>
    <div class="login-box">
      <h1>查看历史反馈信息</h1>
      <el-table :data="tableData">
        <el-table-column prop="aqiLevel" label="等级" width="50px"></el-table-column>
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="province" label="省"></el-table-column>
        <el-table-column prop="city" label="市"></el-table-column>
      </el-table>
      <el-button type="primary" @click="submitForm">
        返回
      </el-button>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {ElTable, ElTableColumn} from 'element-plus';
import axios from 'axios';
import {useRouter} from 'vue-router';
import {getName,formatDate} from './utils/addrUtils.js'

const router = useRouter();
const tableData = ref([]);

onMounted(() => {
  fetchData();
});

/*function fetchData() {
  // 模拟从后端获取数据
  setTimeout(() => {
    tableData.value = [
      { level: 'A', time: '2024-06-17', province: '广东', city: '深圳', address: '某街道123号', feedback: '问题描述……' },
      { level: 'B', time: '2024-06-16', province: '北京', city: '北京', address: '某路口456号', feedback: '问题描述……' },
      // 其他数据项
    ];
  }, 100);  // 延时1秒模拟异步请求
}*/

async function fetchData() {
  try {
    let data = {
      supervisorId: JSON.parse(sessionStorage.getItem('supervisor')).supervisorId
    }
    const response = await axios.post('http://localhost:8085/queryFeedback', data); // 发送 GET 请求获取数据
    //console.log(response.data)
    //let names = getName()
    //console.log(names)
    getName().then(names=>{
      response.data.data.forEach(res=>{
        res.time = formatDate(res.time);
        names.provinces.forEach(item => {
          if(res.provinceId == item.provinceId){
            res.province = item.label;
          }
        })
        names.cities.forEach(item => {
          if(res.cityId == item.provinceId){
            res.city = item.label;
          }
        })
      })
      tableData.value = response.data.data; // 将获取到的数据赋值给 tableData
    })

  /*  */


    //console.log(response.data.data)

  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
}

const submitForm = () => {
  router.push({path: '/supervisor/index'});
};
</script>

<style scoped>
.supervisor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #e0f7fa; /* 蓝绿色背景色 */
   min-height: 100vh;
}

.supervisor-box {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 80%;
  margin-bottom: 30px;
  padding: 20px;
}
.image {
    display: block;
    margin: auto;
	width: 100%;
    height: auto;
}
</style>
